<mat-card class="form-card">
  @if (isFormLoading()) {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  }

  @if (!isFormLoading() && !categories.length) {
    <ix-empty [conf]="noResponseConfig"></ix-empty>
  }

  @if (categories.length) {
    <div class="mat-title">
      @if (selectedCategory) {
        <h3> {{ 'Category' | translate }}: </h3>
      }
      <div class="categories">
        <button mat-button ixTest="categories" [matMenuTriggerFor]="categoriesMenu">
          {{ selectedCategory?.title ? (selectedCategory.title | translate) : '' }}
          <ix-icon name="mdi-menu-down" class="menu-caret"></ix-icon>
        </button>
        <mat-menu #categoriesMenu="matMenu">
          @for (category of categories; track category.id; let i = $index) {
            <button
              mat-menu-item
              [ixTest]="['category', category.id]"
              (click)="onCategoryChanged(category)"
              >
              <span>{{ category.title | translate }}</span>
            </button>
          }
        </mat-menu>
      </div>
    </div>
    @if (selectedCategory) {
      <form (submit)="onSubmit()">
        @for (cls of selectedCategory.classes; track cls.id) {
          <div class="class-row" [formGroup]="form.controls[cls.id]">
            <span class="class-label">{{ cls.title | translate }}</span>
            <ix-select
              formControlName="level"
              [ixTestOverride]="[cls.title, 'level']"
              [label]="'Set Warning Level' | translate"
              [required]="true"
              [tooltip]="helptext.levelTooltip | translate"
              [options]="levelOptions$"
            ></ix-select>
            <ix-select
              formControlName="policy"
              [ixTestOverride]="[cls.title, 'policy']"
              [label]="'Set Frequency' | translate"
              [required]="true"
              [tooltip]="helptext.policyTooltip | translate"
              [options]="policyOptions$"
            ></ix-select>
          </div>
        }
        <div class="form-actions">
          <button
            *ixRequiresRoles="requiredRoles"
            mat-button
            type="submit"
            color="primary"
            ixTest="save"
            [disabled]="form.invalid || isFormLoading() || !selectedCategory"
          >{{ 'Save' | translate }}</button>
        </div>
      </form>
    }
  }
</mat-card>
